<!--
 * @Date: 2024-12-11 16:39:51
 * @Author: LiSong
 * @LastEditors: g05047
 * @LastEditTime: 2025-03-05 14:00:51
 * @Description: SQL数据面板
-->
<template>
  <div class="source-server-panel"
    style="position: relative"
    id="source-id">
    <el-form-item label="SQL内容"
      class="source-view-item">
      <el-button size="small"
        type="primary"
        @click="analysisClick">解析</el-button>
      <el-button size="small"
        type="primary"
        :disabled="!isParams"
        @click="paramsClick">参数明细</el-button>
    </el-form-item>
    <!-- <CodeStudio class="source-code-panel"
      ref="aceEditorRef"
      v-model="dbConfig.content"
      mode="sql">
    </CodeStudio> -->
    <CodeStudioPanel class="source-code-panel"
      v-model="dbConfig.content"
      eventName="requestParams"
      mode="sql"
      codeType="sql" />
    <el-form-item label="数据处理"
      class="source-view-item">
      <div></div>
    </el-form-item>
    <!-- <CodeStudioPanel class="source-code-panel"
      v-model="dbConfig.responseFunc"
      mode="javascript"
      eventName="responseFunc"
      :codeType="CodeStudioDataType.FUNC.value"
      :eventParams="['data', 'params']" /> -->
    <CodeStudioPanel class="source-code-panel"
      v-model="dbConfig.responseFunc"
      :mode="CodeStudioDataType.getMode(dbState.paramCodeType)"
      eventName="responseFunc"
      :codeType="CodeStudioDataType.FUNC.value"
      :eventParams="['data', 'params']" />
    <ParamDrawer ref="paramRef"
      :schema="schema"
      :dataSource="dataSource">
    </ParamDrawer>
  </div>
</template>

<script setup>
import XEUtils from 'xe-utils';
import { ref, reactive, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { CodeStudioDataType } from '@hp/config/pojo'
import CodeStudioPanel from '../components/CodeStudioPanel.vue'
import ParamDrawer from '@/components/homepage/editors/input-dbsource/components/ParamDrawer.vue'
import { useSourceApi } from '@/api';

// 请求的API
const { analyseSQL } = useSourceApi();
const props = defineProps({
  schema: { type: Object },
  dataSource: { type: Object }
})
// 参数弹窗
const paramRef = ref(null)
// 是否有参数
const isParams = computed(() => {
  if (props.dataSource && props.dataSource.sqlConfig && props.dataSource.sqlConfig.isParams) {
    return true
  }
  return false
})
// 数据集
const dbState = reactive({
  cfgKey: 'sqlConfig',
  paramCodeType: 'javascript',
})
//属性配置
const dbConfig = computed(() => {
  return props.dataSource[dbState.cfgKey]
})

/** 解析按钮点击 */
const analysisClick = async () => {
  if (!validateContent()) return
  // 获取解析的内容
  const { code, data, msg } = await analyseSQL(dbConfig.value.content);
  if (code === 200) {
    handleParamColums(data.paramList)
  } else {
    ElMessage.error(msg);
    handleParamColums([])
  }
};
/**
 * 处理参数列
 */
const handleParamColums = (params) => {
  props.dataSource.sqlConfig.paramColumns = []
  let paramColumns = XEUtils.clone(props.dataSource.sqlConfig?.paramColumns || [], true);
  const existingFields = new Set(paramColumns.map(item => item.field));
  params.forEach(element => {
    if (!existingFields.has(element)) {
      paramColumns.push({
        "field": element,
        "kind": 0,
        "defaultValue": "",
        "paramRender": ""
      });
      existingFields.add(element);
    }
  });
  props.dataSource.sqlConfig.paramColumns = paramColumns || []
  props.dataSource.sqlConfig.isParams = true
}
/** 验证输入SQL内容 */
const validateContent = () => {
  if (!dbConfig.value.content) {
    ElMessage.warning('请输入需要解析的SQL语句！');
    if (props.schema.dataSource && props.schema.dataSource.sqlConfig && props.schema.dataSource.sqlConfig.isParams) {
      props.dataSource.sqlConfig.isParams = false
    }
    if (props.dataSource.sqlConfig && props.dataSource.sqlConfig.paramColumns) {
      props.dataSource.sqlConfig.paramColumns = []
    }
    return false;
  }
  return true
}
/**
 * 参数明细
 */
const paramsClick = () => {
  if (!validateContent()) return
  paramRef.value.handleOpen()
}

</script>

<style lang="scss" scoped>
.source-static-panel {
	height: 100%;
	:deep(.el-textarea),
	:deep(.el-textarea__inner) {
		height: 100% !important;
	}
}
</style>